<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
		<script src="../js/flexible.debug.js"></script>
		<script src="../js/flexible_css.debug.js"></script>
		<link rel="stylesheet" href="../css/querendingdan.css" />
		<style>
			 #mask {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: rgba(0,0,0,0.3);
				display: none;
				z-index: 10;
			}
			#add {
				width: 400px;
				height: 285px;
				margin: 0 auto;
				background: #f3f3f3;
				/*margin-top: 20px;*/
				display: none;
				z-index: 15;
				position: fixed;
				left:50%;
				top:40%;
				margin-left:-200px;
				margin-top:-125px;
			}
			#add h1 {
				text-align: center;
				height: 20px;
				font-size: 14px;
				line-height: 30px;
				margin-bottom: 20px;
			}
			#add p {
				
				margin-left: 24px;
				margin-top: 10px;
			}
			#add input {
				width: 304px;
				height: 34px;
				font-size: 15px;
			}
			#add button {
				width: 80px;
				height: 30px;
				margin-right: 10px;
				background: #a3a3f8;
				text-align: center;
			}
			#add .btns {
				width: 180px;
				margin:0 auto;
				margin-top: 15px;
			}
		</style>
	</head>
	<body>
		<section class="section_one">
			<div class="left"><img src="../img/left-back.png" alt="" /></div>
			<div class="center">购物车</div>
			<div class="right"></div>
		</section>
		<article>
			<section class="section_two">
				<div class="shoujian">
					<p class="sjr">收件人：刘某某</p>
					<p class="tel">13211114444</p>
				</div>
				<div class="address">
					<div class="address_icon"><img src="../img/address.png" alt="" /></div>
					<div class="address_add">收货地址：北京市海淀区某某某某某某接到某某小区某号楼某单元111室</div>
					<div class="youjiantou"><img src="../img/youjiantou.png" alt="" /></div>
				</div>
			</section>
			<figure class="menu">
				<div class="dingdan">
					<div class="ding"><img src="../img/ding.png" alt="" /></div>
					<div class="detail">订单详情</div>
					<div class="edit">编辑</div>
				</div>
				<dl>
					<dt><img src="../img/girl_two.png"/></dt>
					<dd>
						<h4>花名册&nbsp;2016春天新款&nbsp;文艺棉质</h4>
						<p>￥69元</p>
						<h2>X1</h2>
					</dd>
				</dl>
			</figure>
			<figure class="peisong">
				<div class="psfs">
					<div class="fangshi"><span>配送方式</span></div>
					<div class="psong">
						<span class="yes">配送</span>
						<span class="zt">自提</span>
					</div>
					<div class="right_icon"><img src="../img/youjiantou.png" alt="" /></div>
				</div>
				<div class="zffs">
					<div class="zffangshi"><span>支付方式</span></div>
					<div class="zhifu">
						<span class="wx">微信支付</span>
						<span class="zfb">支付宝</span>
					</div>
					<div></div>
				</div>
			</figure>
			
			<figure class="youhui">
				<div class="yhq">
					<div class="yh_icon"><img src="../img/youhuiquan.png" alt="" /></div>
					<div class="yh_wz">优惠券</div>
					<div class="right_icon"><img src="../img/youjiantou.png" alt="" /></div>
				</div>
				<div class="fuyan"><input type="text" placeholder="附言" class="fy"/></div>
			</figure>
			
			<figure class="jine">
				<p class="wan">*该订单完成后，您将获得</p>
				<p>-折扣：<span>￥2.00元</span></p>
				<p>+配送费用：<span>￥15.00元</span></p>
				<p class="spjj">商品总价：￥129.00元</p>
				<p class="fkje">应付款金额：<b>￥142.00元</b></p>
			</figure>
			
			
			<div id="mask"></div>
			<div id="add">
				<h1>订单修改</h1>
				<p>收件人：<input type="text" id="name" placeholder="输入姓名"/></p>
				<p>电话号：<input id="phone" type="tel" placeholder="输入电话" value="" name="phone" required></p>
				<p>地址栏：<input id="email" type="email" placeholder="输入地址" value="" name="email" required></p>
				
				<p class="btns"><button id="wan">保存</button><button id="qu" class="qu">取消</button></p>
			</div>
		</article>
		<footer>
			<div class="total">合计：￥142元</div>
			<div class="sure">确认</div>
		</footer>
		<script src="../js/jquery-1.11.2.min.js"></script>
		<script>
			$(function () {
				$('.section_one .left img').click(function () {
					location.href="wodetuandui.html"
				})
				
				
//				$('.bigbox table').on('click','#edit',function  () {
//					$('#mask, #add').show()
//          	})
				$(".edit").click(function(){
					$('#mask, #add').show();
				})
				$(".qu").click(function(){
					$('#mask, #add').hide();
				})
				
				
			})
		</script>
	</body>
</html>
